<template>
    <div class="goods">
        <h1>商品列表</h1>
        <div>
            <div v-show="scene == 0">
        <el-button type="primary" icon="el-icon-plus" @click="addGoods">添加商品</el-button>

            <el-table style="width: 100%" border :data="goodsList" >
                <el-table-column type="index" label="序号" width="80" align='center'>
                    <template slot-scope="{row,$index}">
                        {{pageSize* (pageNo-1)+ $index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" width="width" align='center'>
                </el-table-column>
                <el-table-column prop="goods_title" label="商品描述" width="width" align='center'>
                </el-table-column>
                <el-table-column prop="goods_img" label="图片" width="110" align='center'>
                    <template slot-scope="{row,$index}">
                        <img :src="row.goods_img" style="width:80px;height: 80px;" >
                    </template>
                </el-table-column>
                <el-table-column prop="goods_price" label="价格" width="110" align='center'>
                </el-table-column>
                <el-table-column prop="prop" label="操作" width="width" align='center'>
                    <template slot-scope="{row,$index}">
                        <!-- 这里按钮之后用hintButton替换 -->
                        <el-button type="success" icon="el-icon-sort-down" size="mini" title="下架商品" v-if="row.isSale == 1"
                            @click="cancel(row)"></el-button>
                        <el-button type="success" icon="el-icon-sort-up" size="mini" title="上架商品" v-else
                            @click="sale(row)"></el-button>
                        <el-button type="warning" icon="el-icon-edit" size="mini" title="修改商品" @click="updateGoods(row)">
                        </el-button>
                        <el-button type="info" icon="el-icon-info" size="mini" title="查看商品信息"
                            @click="showGoodsInfo(row)"></el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteGoods(row)">
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                title="删除商品"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="text-align:center" 
            :current-page="pageNo" 
            :page-sizes="[5, 10, 20]"
             :page-size="pageSize"
             layout="prev, pager, next, jumper,->,sizes,total" 
             @current-change="getGoodsList"
             @size-change="handleSizeChange" 
             :total="total">
                </el-pagination>
            </div>
            <!-- 添加商品 -->
            <addGoods v-show="scene == 1" @changeScene="changeScene" ref="addGoods" />
            <!-- 修改商品 -->
            <updateGoods v-show="scene == 2" @changeScene="changeScene" ref="updateGoods" />
            <!-- 抽屉 -->
            <el-drawer :visible.sync="show" size="30%" :show-close="false">
                <el-row>
                    <el-col :span="5">名称</el-col>
                    <el-col :span="16">{{ goodsInfo.goods_name }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">描述</el-col>
                    <el-col :span="16">{{ goodsInfo.goods_title }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">详细信息</el-col>
                    <el-col :span="16">{{ goodsInfo.goods_contents }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">价格</el-col>
                    <el-col :span="16">{{ goodsInfo.goods_price }}元</el-col>
                </el-row>

                <el-row>
                    <el-col :span="5">商品图片</el-col>
                    <el-col :span="12">
                        <template>
                            <div class="block" >
                                <el-carousel>
                                    <el-carousel-item v-for="(img, index) in goodsInfo.goodsImageList" :key="index">
                                        <img :src="img.goods_img" style="height:100% ;width:100%">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </template>
                    </el-col>
                </el-row>
            </el-drawer>
        </div>
    </div>
</div></template>

<script>
import addGoods from '../components/addGoods.vue'
import updateGoods from '../components/updateGoods.vue'
export default {
    name: 'goods',
    components: { addGoods, updateGoods },
    data() {
        return {
            goodsList: [],
            show: false,
            goodsInfo: {},
            scene: 0,
            pageNo:1,
            pageSize:5,
            total:0
        };
    },

    mounted() {
        this.getGoodsList()
    },

    methods: {
        async getGoodsList(pages=1) {
            this.pageNo=pages   
            const {pageSize,pageNo}=this
            const res = await this.$API.reqGetAllGoods({pageSize,pageNo})
            this.goodsList = res.data.data.goodsList
            this.total=res.data.data.total
            console.log(res.data.data);
        },
        handleSizeChange(pageSize){
            this.pageSize=pageSize
            this.getGoodsList()
        },
        async showGoodsInfo(row) {
            const res = await this.$API.reqGetGoodsInfoById(row.goods_id)
            this.goodsInfo = res.data.data
            console.log(this.goodsInfo);
            this.show = true
        },
        async cancel(row) {
            let result = await this.$API.reqCancelGoods({ id: row.goods_id })
            if (result.data.code == 200) {
                row.isSale = 0;
                this.$message({
                    message: '下架成功',
                    type: 'success'
                })
            }
        },
        async sale(row) {
            let result = await this.$API.reqSaleGoods({ id: row.goods_id })
            if (result.data.code == 200) {
                row.isSale = 1;
                this.$message({
                    message: '上架成功',
                    type: 'success'
                })
            }
        },
        async deleteGoods(row) {
            let result = await this.$API.reqDeleteGoods(row.goods_id)
            if (result.data.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                 //如果当前页数据大于1，停留在本页，等于1则删除后跳到前一页
                 this.getGoodsList(this.goodsList.length > 1 ? this.pageNo : this.pageNo - 1);
            } else if (result.data.code == 201) {
                this.$message({
                    message: '该商品不可删除',
                    type: 'warning'
                })
            }else{
                this.$message({
                    message: '删除失败',
                    type: 'warning'
                })
            }
            console.log(result);
        },
        addGoods() {
            this.scene = 1
            this.$refs.addGoods.initData()
        },
        async updateGoods(row) {
            this.scene = 2
            this.$refs.updateGoods.initData(row)
        },
        changeScene(isChange) {
            this.scene = 0
            if (isChange !== 0) {
                this.getGoodsList()
            }
        }
    },
};
</script>

<style  >
.el-drawer .el-row {
    display: flex;
    align-items: center;
}

.el-drawer .el-row .el-col-5 {
    font-size: 18px;
    text-align: right;
}

.el-drawer .el-col {
    margin: 10px 10px;
}
</style>